<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<TITLE>论坛--帖子列表</TITLE>

	<Link rel="stylesheet" type="text/css" href="style/style.css" />

	<script src="http://47.106.66.89:8080/js/vue.min.js"></script>
	<script src="http://47.106.66.89:8080/js/axios.min.js"></script>
	<link  href="http://47.106.66.89:8080/js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
	<script src="http://47.106.66.89:8080/js/ele-2.15.7/index.js"></script>
	<script src="js/bbs.js"></script>
</HEAD>

<BODY>
<div id="app">
	<bbs>
		<div style="width: 100%;">
			<!--      主体        -->
			<DIV style="width: 100%">
				<!--      导航        -->
				<DIV>
					&gt;&gt;<B><a href="index.html">论坛首页</a></B>&gt;&gt;
					<B><a href="list.html">灌水乐园</a></B>
				</DIV>

				<DIV style="display: flex; justify-content: space-between;align-items: center">
					<A href="post.html"><IMG src="image/post.gif" name="td_post" border="0" id=td_post></A>
					<div>
						文章名:<input v-model="title">
						作者名:<input v-model="author">
						<button @click="searchByField">搜索</button>
					</div>
					<el-pagination
							background
							layout="prev, pager, next"
							:total="page.total"
							:page-size="page.rows"
							@current-change="pageChange"
							:current-page.sync="page.page">
					</el-pagination>
				</DIV>

				<DIV class="t">
					<TABLE cellSpacing="0" cellPadding="0" width="100%">
						<TR>
							<TH class="h" style="WIDTH: 100%" colSpan="4"><SPAN>&nbsp;</SPAN></TH>
						</TR>
						<!--       表 头           -->
						<TR class="tr2">
							<TD>&nbsp;</TD>
							<TD style="WIDTH: 80%" align="center">文章</TD>
							<TD style="WIDTH: 10%" align="center">作者</TD>
							<TD style="WIDTH: 10%" align="center">回复</TD>
						</TR>
						<!--         主 题 列 表        -->

						<TR class="tr3" v-for=" t in list">
							<TD><IMG src="image/topic.gif" border=0></TD>
							<TD style="FONT-SIZE: 15px">
								<A :href="'detail.html?id=' + t.id">{{t.title}}</A>
							</TD>
							<TD align="center">{{t.user.cname}}</TD>
							<TD align="center">{{t.replyCnt}}</TD>
						</TR>
					</TABLE>
				</DIV>
				<!--            翻 页          -->
				<DIV style="text-align: right">
					<el-pagination
							background
							layout="prev, pager, next"
							:total="page.total"
							:page-size="page.rows"
							@current-change="pageChange"
							:current-page.sync="page.page">
					</el-pagination>
				</DIV>
			</DIV>
		</div>
	</bbs>
</div>
<script>
	var v = new Vue({
		el : "#app",
		data : {
			page : {page:1, rows:8, total:0},
			list : [],
			author:null,
			title:null
		},
		created() {
			this.query();
		},
		methods : {
			query(){
				axios.get("topic/queryByBid" + location.search,{
					params: this.page
				}).then(res=> {
					this.list = res.data.records;
					this.page.total = res.data.total;
				});
			},
			pageChange(pageNum){
				this.page.page = pageNum;
				this.query();
			},
			searchByField(){
				axios.get("topic/searchByField"+location.search,{
					params:{page:this.page.page,
						rows:this.page.rows,
						cname:this.author,
						title: this.title,
					}
				}).then(res=>{
					this.list = res.data.records;
					this.page.total = res.data.total;
				});
			}
		}
	})
</script>
</BODY>
</HTML>
